import React from 'react';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

 const page2 = [
  {
    title: '经营创业',
    content: (
      <>
        <p>保证金＋月供，一边赚钱一边赚车，滴滴旗下的小桔汽车根据网约车政策将车辆交给网约车车主，按照合同付完押金后，每个月向车主收取固定的服务费。</p> 
        <p>车主使用该车辆通过滴滴平台接单获得收入。车主在合同期结束之后可以选择继续或者取回押金退车。</p>
        <p>相关细则则以正式签订的经营销售合同为准。</p>
      </>
    ),
    button: {
      className: 'btn btn-primary',
      text: '加入经营创业计划'
    }
  },
  {
    title: '承包合作',
    content:  (
      <>
        <p>低首付全款提车，运费收入高，滴滴旗下的小桔汽车使用贷款的方式将车辆交付给网约车车主。</p>
        <p>网约车主需要付首付，每个月供车贷。</p>
        <p>合同期满后付完车尾款，车辆所有权归网约车车主所有。相关细则则以正式签订的经营销售合同为准。</p>
      </>
    ),
    button: {
      className: 'btn btn-gray',
      text: '加入承包合作计划'
    }
  },
];

const Row = ({children}) => {
  return <div className="row">{children}</div>
}

const Col = ({children}) => {
  return <div className="col">{children}</div>
}

export default function Page2({handleModalVisible}) {
  const children = page2.map((d, i) => (
    <QueueAnim
      component={Col}
      key={i}
      type="bottom"
      componentProps={{ span: 8 }}
    >
      <h3 key="h3" className="title">{d.title}</h3>
      <div key="p" className='content'>{d.content}</div>
      <button {...d.button} onClick={handleModalVisible}>{d.button.text}</button>
    </QueueAnim>
  ));
  return (
    <div className="page2-wrapper" id="home-func" >
      <h2 className="slogan">我们目前的合作方式</h2>
      <OverPack className="home-layout" location="home-func" playScale={0.4}>
        <QueueAnim className="home-func" type="bottom" key="home-func" ease="easeOutQuart" leaveReverse>
          <QueueAnim
            key="content"
            type="bottom"
            component={Row}
            componentProps={{ gutter: 171 }}
          >
            {children}
          </QueueAnim>
        </QueueAnim>
      </OverPack>
    </div>);
}
